<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- ##### Header Area Start ##### -->
<header th:fragment="menu(n)" class="header_area">
    <div class="classy-nav-container breakpoint-off d-flex align-items-center justify-content-between">
        <!-- Classy Menu -->
        <nav class="classy-navbar" id="essenceNav">
            <!-- Logo -->
            <a class="nav-brand" href="/"><img src="/img/core-img/logo.png" alt=""></a>
            <!-- Navbar Toggler -->
            <div class="classy-navbar-toggler">
                <span class="navbarToggler"><span></span><span></span><span></span></span>
            </div>
            <!-- Menu -->
            <div class="classy-menu">
                <!-- close btn -->
                <div class="classycloseIcon">
                    <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                </div>
                <!-- Nav Start -->
                <div class="classynav">
                    <ul>
                        <li><a href="#">商品分类</a>
                            <div class="megamenu">
                                <ul class="single-mega cn-col-4">
                                    <li class="title">牛仔工作服</li>
                                    <li><a th:href="@{/category/list/(type=cowBoySuit)}">牛仔工作服套装</a></li>
                                    <li><a th:href="@{/category/list/(type=cowBoyPlant)}">牛仔工作服裤子</a></li>
                                    <li><a th:href="@{/category/list/(type=cowBoyLap)}">牛仔单上衣</a></li>
                                    <li><a th:href="@{/category/list/(type=summerSuit)}">夏季牛仔工作服</a></li>
                                </ul>
                                <ul class="single-mega cn-col-4">
                                    <li class="title">涤卡套装</li>
                                    <li><a th:href="@{/category/list/(type=dacronSuit)}">涤卡套装</a></li>
                                </ul>
                                <ul class="single-mega cn-col-4">
                                    <li class="title">冬季棉服</li>
                                    <li><a th:href="@{/category/list/(type=winterCotton)}">冬季棉服</a></li>
                                </ul>
                                <div class="single-mega cn-col-4">
                                    <a href="/category/list" th:title="点击查看全部商品">
                                        <img src="/img/bg-img/bg-6.jpg"  alt="">
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li ><a href="#">商品服务平台</a>
                            <ul class="dropdown" id="platform">
                                <li>
                                    <a href="#">淘宝</a>
                                </li>
                                <li>
                                    <a href="#">拼多多</a>
                                </li>
                                <li>
                                    <a href="#">阿里巴巴</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">商品专区</a>
                            <ul class="dropdown">
                                <li>
                                    <a th:href="@{/product/newest}">最新商品</a>
                                </li>
                                <li>
                                    <a th:href="@{/product/hot}">最热商品</a>
                                </li>
                                <li>
                                    <a th:href="@{/product/sale/index}">打折商品</a>
                                </li>
                                <li>
                                    <a th:href="@{/product/push}">商品推新历史</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="/induction">品牌故事</a></li>
                        <li><a href="/contact">联系我</a></li>
                    </ul>
                </div>
                <!-- Nav End -->
            </div>
        </nav>

        <!-- Header Meta Data -->
        <div class="header-meta d-flex clearfix justify-content-end">
            <!-- Search Area -->
            <div class="search-area">
                <form action="#" method="post">
                    <input type="search" name="search" id="headerSearch" placeholder="点击这里搜索商品">
                    <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                </form>
            </div>
            <!-- Favourite Area -->
            <div class="favourite-area">
                <a href="#"><img src="/img/core-img/heart.svg" alt=""></a>
            </div>
            <!-- User Login Info -->
            <div class="user-login-info">
                <a href="#"><img src="/img/core-img/user.svg" alt=""></a>
            </div>
            <!-- Cart Area -->
            <div class="cart-area">
                <a href="#" id="essenceCartBtn"><img src="/img/core-img/bag.svg" alt=""> <span>3</span></a>
            </div>
        </div>

    </div>
</header>
<!-- ##### Header Area End ##### -->
<!-- ##### Footer Area Start ##### -->
<footer th:fragment="footer" class="footer_area clearfix">
    <div class="container">
        <div class="row">
            <!-- Single Widget Area -->
            <div class="col-12 col-md-6">
                <div class="single_widget_area d-flex mb-30">
                    <!-- Logo -->
                    <div class="footer-logo mr-50">
                        <a href="#"><img src="/img/core-img/logo2.png" alt=""></a>
                    </div>
                    <!-- Footer Menu -->
                    <div class="footer_menu">
                        <ul>
                            <li><a href="shop.html">所有商品</a></li>
                            <li><a href="blog.html">最新商品</a></li>
                            <li><a href="contact.html">联系我</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Single Widget Area -->
            <div class="col-12 col-md-6">
                <div class="single_widget_area mb-30">
                    <ul class="footer_widget_menu">
                        <li><a href="#">订单状态</a></li>
                        <li><a href="#">支付选项</a></li>
                        <li><a href="#">物流信息</a></li>
                        <li><a href="#">指导</a></li>
                        <li><a href="#">隐私条例</a></li>
                        <li><a href="#">使用手册</a></li>
                        <li><a href="/admin/login" target="_blank">后台管理</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row align-items-end">
            <!-- Single Widget Area -->
            <div class="col-12 col-md-6">
                <div class="single_widget_area">
                    <div class="footer_heading mb-30">
                        <h6>订阅</h6>
                    </div>
                    <div class="subscribtion_form">
                        <form action="#" method="post">
                            <input type="email" name="mail" class="mail" placeholder="在这里输入您的Email">
                            <button type="submit" class="submit"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Single Widget Area -->
            <div class="col-12 col-md-6">
                <div class="single_widget_area">
                    <div class="footer_social_area">
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Youtube"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <p>
                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                    Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> <a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备20005422号-2</a>
                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                </p>
            </div>
        </div>

    </div>
</footer>
<!-- ##### Footer Area End ##### -->